<template>
  <div>
 
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 搜索表单 -->
    <el-form
      @submit.native.prevent
      class="demo-form-inline"
      :model="form"
      :inline="true"
    >
      <el-form-item label="姓名">
        <el-input
          @keyup.native.enter="onSubmit"
          v-model="form.name"
          placeholder="请输入导演姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 分割线 -->
    <el-divider content-position="left">导演列表</el-divider>
    <!-- 导演列表 -->
    <person
      v-for="(item, i) in director"
      :key="i"
      :avatar="item.director_avatar"
      :name="item.director_name"
      @delete="deletItem(i)"
    ></person>
  </div>
</template>

<script>
import Person from "@/components/Person.vue";
import myaxios from "@/http/MyAxios";
export default {
  components: { Person },
  comments: { Person },
  data() {
    return {
      form: {
        name: "", // 绑定导演姓名
      },
      director: [], // 导演列表
    };
  },
  methods: {
    // 删除导演
    deletItem(i) {
      this.$confirm("此操作将永久删除该导演, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let id = this.director[i].id;
          this.$httpApi.directorApi.delete({ id }).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.director.splice(i, 1);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onSubmit() {
      if (this.form.name) {
        this.$httpApi.directorApi.queryNameLike(this.form).then((res) => {
          console.log(res);
          if (res.data.data.length > 0) {
            this.director = res.data.data;
          } else {
            this.$message.error("查询不到该演员");
          }
        });
      }
    },
  },
  mounted() {
    this.$httpApi.directorApi.queryAll().then((res) => {
      this.director = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped></style>
